@use 'sass:math';
// Color variables
$body-color: #F3F7FA;
$black: #333333; // 正文主色
$white: #FFFFFF;
$red: #FF2E55; //f44
$blue: #5472EA; //1989fa
$blue-active: #167BE0;

a:link,
a:visited {
    color: $blue;
}

a:active {
    color: $blue-active;
}

/* ios解决滑动问题 */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

*::-webkit-scrollbar {
    display: none;
}

/*在移动端上input和textarea边框问题*/
/*去掉ios上阴影*/
input,
textarea {
    margin: 0;
    padding: 0;
    -webkit-user-select: auto; /*webkit浏览器*/
    outline: none;
    -webkit-appearance: none;
}


.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-start {
    justify-content: flex-start !important;
}

.flex-end {
    justify-content: flex-end !important;
}

.flex-between {
    justify-content: space-between !important;
}

.flex-evenly {
    justify-content: space-evenly;

    &:before,
    &:after {
        display: block;
        content: '';
    }
}

.flex-around {
    justify-content: space-around !important;
}

.flex-column {
    flex-direction: column;
}

@mixin flexAlignCenter() {
    display: flex;
    align-content: center;
    align-items: center;
}

.flex-center {
    @include flexAlignCenter();
    justify-content: center;
}

.flex-col-start {
    @include flexAlignCenter();
    flex-direction: column;
    justify-content: flex-start;
}

.flex-col-center {
    @include flexAlignCenter();
    flex-direction: column;
    justify-content: center;
}

.text-single-line {
    white-space: nowrap;
}

.text-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.custom-toast-rtl {
    > .van-toast__text {
        direction: rtl;
    }
}

.dialog-footer__row-reverse {
    > .van-dialog__footer--buttons {
        flex-direction: row-reverse !important;
    }
}

.empty-list {
    color: #AEAEAE;
    text-align: center;
}

.van-toast__text {
    word-break: keep-all;
}

@mixin safeArea($property, $size: 0) {
    #{$property}: #{$size};
    $constant: constant(safe-area-inset-top);
    $env: env(safe-area-inset-top);
    #{$property}: calc(#{$constant} + #{$size});
    #{$property}: calc(#{$env} + #{$size});
    #{$property}: -webkit-calc(#{$constant} + #{$size});
    #{$property}: -webkit-calc(#{$env} + #{$size});
}

@function pxToVw($px) {
    @return math.div($px * 4vw, 15);
}

@function pxToRem($px, $reference: 37.5) {
    @return math.div($px, $reference) + rem;
}

@mixin lineClamp($lineNumber) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow: hidden;

    -webkit-line-clamp: $lineNumber;
}

@keyframes flip {
    from {
        opacity: 0;
        transform: rotate3d(1, 1, 0, 15deg) translateY(-10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: rotate3d(0, 0, 0) translateY(0) scale(1);
    }
}

.flipAnimation {
    opacity: 0;
    animation: flip 0.3s forwards;
}
.clickAnimation {
    &:active {
        transform: scale(0.9);
        filter: brightness(0.8);
    }
}